<script setup>

import { ref,defineProps,defineEmits,watch,onMounted } from 'vue'
import axios from 'axios'
import { ElMessage  } from 'element-plus';

// 定义 props
//调用传递的属性
const props = defineProps({
  dialogVisible: Boolean
});

const dialogVisibleInner = ref(false);

const form = ref({
  province: "",
  city: "",
  district: "",
  detailAddress: "",
  tel: "",
  receiver: "",
  emailCode: "",
  isDefault: false
})

// 监听 props 的变化      dialogVisible
watch(() => props.dialogVisible, (newVal) => {
  console.log("newVal",newVal)
  if (newVal) {
    dialogVisibleInner.value = newVal;
    form.value = {
      province: "",
      city: "",
      district: "",
      detailAddress: "",
      tel: "",
      receiver: "",
      isDefault: 0,
    };
  }
});

const reAddrForm = ref(null);
const provinces = ref([])
const cities = ref([])
const districts = ref([])

const initProvinceData = () => {
  console.log("初始化省份数据")
  //让对话框显示
  axios.get('/china/getAllProvince').then(response => {
    provinces.value = response.data;
  });
}

const handleProvinceChange = ()=>{
  // 根据省份获取城市列表，并设置为市级 el-select 的 options
  axios.get('/address/getAllCities', {
    params: {"provinceId": form.value.province}
  }).then((response) => {//成功回调函数
    cities.value = response.data;
  }).catch((error) => {
    console.log(error);
  });
  //清空之前的数据
  districts.value = []
  form.value.city = ''
  form.value.district = ''
}

const handleCityChange = ()=>{
  axios.get('/address/getAllDistricts', {
    params: {"cityId": form.value.city}
  }).then((response) => {//成功回调函数
    districts.value = response.data;
  }).catch((error) => {
    console.log(error);
  });
  form.value.district = ''
}

const emit = defineEmits('close')

//保存
const handleSave = () => {
  axios.post(`/address/save`, form.value).then(resp => {
    ElMessage.success('添加成功')
    // 通知父组件需要重新初始化地址数据
    emit('reload-address');
    //关闭对话框
    handleClose();
  }).catch(error => {
    console.log(error);
    ElMessage.success('添加失败')
  })
}

//关闭
const handleClose = () => {
  dialogVisibleInner.value = false;
  //发送给父组件关闭事件，并且传递一个false的值
  emit('close', false);
}



onMounted(() => {
  console.log("是否存在...",props)
  initProvinceData();
})

</script>
<template>
  <div>
    <!-- 模态框 -->
    <el-dialog
        title="添加收货地址"
        width="580px"
        v-model="dialogVisibleInner"
        @close="handleClose">
      <el-form label-width="80px" :model="form" size="small">
        <el-row>
          <el-col :span="7">
            <el-form-item label="省">
              <el-select v-model="form.province"
                         @change="handleProvinceChange"
                         style="width: 110px">
                <el-option
                    v-for="province in provinces"
                    :key="province.id"
                    :label="province.name"
                    :value="province.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="市">
              <el-select
                  v-model="form.city"
                  @change="handleCityChange"
                  style="width: 110px">
                <el-option
                    v-for="city in cities"
                    :key="city.id"
                    :label="city.name"
                    :value="city.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="区">
              <el-select v-model="form.district" style="width: 120px">
                <el-option
                    v-for="district in districts"
                    :key="district.id"
                    :label="district.name"
                    :value="district.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="详细地址">
          <el-input type="textarea"
                    v-model="form.detailAddress"
                    style="width: 438px">
          </el-input>
        </el-form-item>
        <el-row>
          <el-col :span="11">
            <el-form-item label="手机号码">
              <el-input v-model="form.tel"
                        style="width: 175px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="收件人">
              <el-input v-model="form.receiver"
                        style="width:190px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="默认地址">
          <el-switch v-model="form.isDefault" active-text="是"
                     inactive-text="否"
                     :active-value="1"
                     :inactive-value="0"
                     active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleSave">确定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>